/**
 * Vue绑定样式
 * 1. class样式写法,:class=xxx,xxx可以是以下三种
 * - 字符串,适用于类名不确定,要动态获取
 * - 数组,绑定多个样式,个数不确定,名字也不确定
 * - 对象,绑定多个样式,个数确定,名字也确定,但不确定用不用
 * 2. style样式  :style=xxx,xxx可以是以下两种
 * -  对象 比如  :style={fontSize:"30px"}
 * - 数组 比如   :style=[{fontSize:"30px"},{color:"red"}]
 *
 * @type {boolean}
 */
// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	data: {// data用于存储数据,数据供el指定的容器使用,
		name: "yushi5344",
		index: 0,
		bg: "error",
		classArr: ["success", 'color1'],
		classObj: {
			success: false,
			warning: true,
			color2: true
		},
		styleObj: {
			color: "red",
			fontSize: '40px',
		}
	},
	methods: {
		changeStyle() {
			let arr = ['success', 'warning', 'error'], i = this.index % 3;
			this.bg = arr[i];
			this.index++;
		}
	},

});
